<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>企业网站 - Bootstrap练习</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 自定义样式 */
        .hero-section {
            background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://via.placeholder.com/1920x600') no-repeat center center;
            background-size: cover;
            color: white;
            padding: 150px 0;
            text-align: center;
        }

        .feature-icon {
            font-size: 2.5rem;
            color: #0d6efd;
            margin-bottom: 1rem;
        }

        .testimonial-card {
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s;
        }

        .testimonial-card:hover {
            transform: translateY(-10px);
        }

        footer {
            background-color: #212529;
            color: white;
        }
    </style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
    <div class="container">
        <a class="navbar-brand" href="#">
            <i class="fas fa-rocket me-2"></i>企业LOGO
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                    <a class="nav-link active" href="#">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">关于我们</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">服务</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">产品</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">联系我们</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<!-- 轮播图 -->
<div id="mainCarousel" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-indicators">
        <button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="0" class="active"></button>
        <button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="1"></button>
        <button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="2"></button>
    </div>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="./img/1.png?text=第一张幻灯片" class="d-block w-100" alt="...">
            <div class="carousel-caption d-none d-md-block">
                <h5>专业的企业解决方案</h5>
                <p>为您提供最优质的服务</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="./img/2.png?text=第二张幻灯片" class="d-block w-100" alt="...">
            <div class="carousel-caption d-none d-md-block">
                <h5>创新技术驱动</h5>
                <p>引领行业发展</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="./img/3.png?text=第三张幻灯片" class="d-block w-100" alt="...">
            <div class="carousel-caption d-none d-md-block">
                <h5>全球服务网络</h5>
                <p>随时随地为您服务</p>
            </div>
        </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#mainCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#mainCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
    </button>
</div>

<!-- 主要内容 -->
<main class="container my-5">
    <!-- 特色服务 -->
    <section class="mb-5">
        <div class="text-center mb-5">
            <h2 class="display-5">我们的服务</h2>
            <p class="lead text-muted">专业团队为您提供全方位解决方案</p>
        </div>

        <div class="row g-4">
            <div class="col-md-4">
                <div class="card h-100 border-0 text-center p-4">
                    <div class="feature-icon">
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <h3>数据分析</h3>
                    <p>利用大数据技术为您提供精准的商业分析和决策支持</p>
                    <a href="#" class="btn btn-outline-primary">了解更多</a>
                </div>
            </div>

            <div class="col-md-4">
                <div class="card h-100 border-0 text-center p-4">
                    <div class="feature-icon">
                        <i class="fas fa-mobile-alt"></i>
                    </div>
                    <h3>移动开发</h3>
                    <p>专业的移动应用开发，覆盖iOS和Android平台</p>
                    <a href="#" class="btn btn-outline-primary">了解更多</a>
                </div>
            </div>

            <div class="col-md-4">
                <div class="card h-100 border-0 text-center p-4">
                    <div class="feature-icon">
                        <i class="fas fa-cloud"></i>
                    </div>
                    <h3>云服务</h3>
                    <p>安全可靠的云计算解决方案，助力企业数字化转型</p>
                    <a href="#" class="btn btn-outline-primary">了解更多</a>
                </div>
            </div>
        </div>
    </section>

    <!-- 客户评价 -->
    <section class="my-5 py-5 bg-light">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="display-5">客户评价</h2>
                <p class="lead text-muted">听听他们怎么说</p>
            </div>

            <div class="row g-4">
                <div class="col-md-4">
                    <div class="card testimonial-card h-100">
                        <div class="card-body text-center p-4">
                            <img src="./img/4.png" width="100px" class="rounded-circle mb-3" alt="客户头像">
                            <h5 class="card-title">张先生</h5>
                            <p class="text-muted">ABC公司CEO</p>
                            <p class="card-text">"专业高效的服务团队，帮助我们解决了长期困扰的技术难题，强烈推荐！"</p>
                            <div class="text-warning">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="card testimonial-card h-100">
                        <div class="card-body text-center p-4">
                            <img src="./img/6.png" width="100px" class="rounded-circle mb-3" alt="客户头像">
                            <h5 class="card-title">李女士</h5>
                            <p class="text-muted">XYZ集团CTO</p>
                            <p class="card-text">"他们的技术解决方案为我们节省了大量成本，团队响应速度非常快。"</p>
                            <div class="text-warning">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star-half-alt"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="card testimonial-card h-100">
                        <div class="card-body text-center p-4">
                            <img src="./img/5.png" width="100px" class="rounded-circle mb-3" alt="客户头像">
                            <h5 class="card-title">王经理</h5>
                            <p class="text-muted">123企业技术总监</p>
                            <p class="card-text">"从咨询到实施全程专业指导，项目交付准时，效果超出预期。"</p>
                            <div class="text-warning">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>

<!-- 页脚 -->
<footer class="py-5">
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
                <h5 class="text-uppercase">关于我们</h5>
                <p>我们是一家专注于企业技术解决方案的公司，拥有10年行业经验，服务超过500家企业客户。</p>
            </div>

            <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
                <h5>快速链接</h5>
                <ul class="list-unstyled">
                    <li><a href="#" class="text-white">首页</a></li>
                    <li><a href="#" class="text-white">关于我们</a></li>
                    <li><a href="#" class="text-white">服务</a></li>
                    <li><a href="#" class="text-white">联系我们</a></li>
                </ul>
            </div>

            <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
                <h5>联系方式</h5>
                <ul class="list-unstyled">
                    <li><i class="fas fa-map-marker-alt me-2"></i> 北京市朝阳区科技园A座1001</li>
                    <li><i class="fas fa-phone me-2"></i> (010) 1234-5678</li>
                    <li><i class="fas fa-envelope me-2"></i> info@company.com</li>
                </ul>
            </div>

            <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
                <h5>关注我们</h5>
                <div class="social-icons">
                    <a href="#" class="text-white me-2"><i class="fab fa-weixin fa-lg"></i></a>
                    <a href="#" class="text-white me-2"><i class="fab fa-weibo fa-lg"></i></a>
                    <a href="#" class="text-white me-2"><i class="fab fa-linkedin fa-lg"></i></a>
                    <a href="#" class="text-white me-2"><i class="fab fa-github fa-lg"></i></a>
                </div>
                <div class="mt-3">
                    <p>订阅我们的新闻通讯</p>
                    <div class="input-group">
                        <input type="email" class="form-control" placeholder="您的邮箱">
                        <button class="btn btn-primary" type="button">订阅</button>
                    </div>
                </div>
            </div>
        </div>

        <hr class="my-4 bg-light">

        <div class="text-center">
            <p class="mb-0">© 2023 企业名称. 保留所有权利.</p>
        </div>
    </div>
</footer>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>